<template>
  <view class="notice-container">
    <!-- 搜索区域 -->
    <view class="search-area">
      <!-- 第一行：地区选择 -->
      <view class="location-row">
        <!-- 省份选择器 -->
        <view class="location-item rounded-selector">
          <picker 
            mode="selector" 
            :range="provinceOptions" 
            @change="onProvinceChange" 
            :value="selectedProvinceIndex"
          >
            <view class="picker-item">
              <text class="location-text">{{ provinceOptions[selectedProvinceIndex] === '全部' ? '选择省份' : provinceOptions[selectedProvinceIndex] }}</text>
              <uni-icons type="bottom" size="12" color="#666" class="location-icon"></uni-icons>
            </view>
          </picker>
        </view>
        
        <!-- 城市选择器 -->
        <view class="location-item rounded-selector">
          <picker 
            mode="selector" 
            :range="cityOptions" 
            @change="onCityChange" 
            :value="selectedCityIndex"
            :disabled="!selectedProvince"
          >
            <view class="picker-item" :class="{'disabled': !selectedProvince}">
              <text class="location-text">{{ cityOptions[selectedCityIndex] === '全部' ? '选择城市' : cityOptions[selectedCityIndex] }}</text>
              <uni-icons type="bottom" size="12" color="#666" class="location-icon"></uni-icons>
            </view>
          </picker>
        </view>
        
        <!-- 区县选择器 -->
        <view class="location-item rounded-selector">
          <picker 
            mode="selector" 
            :range="districtOptions" 
            @change="onDistrictChange" 
            :value="selectedDistrictIndex"
            :disabled="!selectedCity"
          >
            <view class="picker-item" :class="{'disabled': !selectedCity}">
              <text class="location-text">{{ districtOptions[selectedDistrictIndex] === '全部' ? '选择区域' : districtOptions[selectedDistrictIndex] }}</text>
              <uni-icons type="bottom" size="12" color="#666" class="location-icon"></uni-icons>
            </view>
          </picker>
        </view>
      </view>
      
      <!-- 第二行：标题搜索 -->
      <view class="search-row">
        <view class="search-box">
          <text class="iconfont icon-search search-icon"></text>
          <input 
            type="text" 
            class="search-input" 
            placeholder="请输入公告标题"  
            confirm-type="search"
            v-model="searchTitle"
            @confirm="handleSearch"
          />
          <text class="iconfont icon-close clear-icon" v-if="searchTitle" @tap="clearSearch"></text>
        </view>
        <view class="search-btn" @tap="handleSearch">搜索</view>
        <view class="filter-btn" @tap="showFilterPanel">筛选</view>
      </view>
    </view>

    <!-- 公告列表 -->
    <scroll-view 
      scroll-y 
      class="notice-list" 
      @scrolltolower="loadMore"
      :show-scrollbar="true"
      :bounces="false"
      lower-threshold="50"
    >
      
      <view class="notice-card" v-for="(item, index) in noticeList" :key="index" @tap="viewNoticeDetail(item)">
        <view class="notice-title">{{item.title}}</view>
        <view class="notice-info">
          <view class="notice-tags-row">
            <view class="notice-tags">
              <text class="notice-tag">{{item.companyTypeText || getCompanyTypeText(item.companyType) || '暂无'}}</text>
              <text class="notice-tag">{{item.isWeaveText || (item.isWeave !== undefined ? (item.isWeave ? '带编' : '不带编') : '暂无')}}</text>
            </view>
            <text class="notice-status" :class="[getStatusClass(item.applyStatus)]">{{item.statusText || getStatusText(item.applyStatus)}}</text>
          </view>
          <view class="notice-detail">
            <text class="notice-detail-item">招聘人数：{{item.recruitNum || '暂无'}}</text>
            <text class="notice-detail-item">地址：{{item.address || '暂无'}}</text>
            <text class="notice-detail-item">报名时间：{{ (item.startTime && item.endTime) ? `${formatDate(item.startTime)} ~ ${formatDate(item.endTime)}` : '暂无' }}</text>
          </view>
        </view>
      </view>
      
      <!-- 加载更多提示 -->
      <view class="loading-more" v-if="noticeList.length > 0">
        <text v-if="isLoading">加载中...</text>
        <text v-else-if="!hasMore">没有更多数据了</text>
        <text v-else>上拉加载更多</text>
      </view>
      
      <!-- 底部占位，确保可以触发滚动到底部事件 -->
      <view class="bottom-placeholder"></view>
      
      <!-- 空状态提示 -->
      <view class="empty-state" v-if="noticeList.length === 0 && !isLoading">
        <text class="empty-text">暂无招聘公告</text>
        <view class="reset-filter-btn" @tap="resetAllFilters">重置筛选条件</view>
      </view>
    </scroll-view>

    <!-- 详细筛选面板 -->
    <view class="filter-panel" v-if="showFilter">
      <view class="filter-panel-mask" @tap="hideFilterPanel"></view>
      <view class="filter-panel-content">
        <view class="filter-panel-header">
          <text>详细筛选</text>
          <text class="close-btn" @tap="hideFilterPanel">×</text>
        </view>
        <view class="filter-panel-body">
          <view class="filter-panel-item">
            <text class="filter-label">是否带编</text>
            <picker mode="selector" :range="yesOrNoOptions" range-key="dictLabel" @change="handleWeaveChange" class="filter-picker">
              <view class="filter-picker-text">{{currentWeave.dictLabel || '全部'}}</view>
            </picker>
          </view>
          <view class="filter-panel-item">
            <text class="filter-label">公司类型</text>
            <picker mode="selector" :range="companyTypeOptions" range-key="dictLabel" @change="handleCompanyTypeChange" class="filter-picker">
              <view class="filter-picker-text">{{currentCompanyType.dictLabel || '全部'}}</view>
            </picker>
          </view>
          <view class="filter-panel-item">
            <text class="filter-label">报名状态</text>
            <picker mode="selector" :range="statusOptions" range-key="dictLabel" @change="handleStatusChange" class="filter-picker">
              <view class="filter-picker-text">{{currentStatus.dictLabel || '全部'}}</view>
            </picker>
          </view>
        </view>
        <view class="filter-panel-footer">
          <button class="reset-btn" @tap="resetFilter">重置</button>
          <button class="confirm-btn" @tap="confirmFilter">确定</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getRecruitNotice } from '@/api/notice/recruitNotice'
import { getDicts } from '@/api/dict/data.js'
import Area from '@/utils/area.js'
import uniIcons from '@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue'

export default {
  components: {
    uniIcons
  },
  computed: {
    // 公司类型选项
    companyTypeOptions() {
      return [{ dictValue: '', dictLabel: '全部' }].concat(this.companyTypeDict);
    },
    // 是否带编选项
    yesOrNoOptions() {
      return [
        { dictValue: '', dictLabel: '全部' },
        { dictValue: '1', dictLabel: '带编' },
        { dictValue: '0', dictLabel: '不带编' }
      ];
    },
    // 报名状态选项
    statusOptions() {
      return [{ dictValue: '', dictLabel: '全部' }].concat(this.applyStatusDict);
    }
  },
  data() {
    return {
      statusBarHeight: 0, 
      noticeList: [],
      pageNum: 1,
      pageSize: 5,
      total: 0,
      isLoading: false,
      isRefreshing: false,
      hasMore: true,
      // 搜索相关
      searchTitle: '', // 公告标题搜索关键词
      selectedProvince: '', // 选中的省份
      selectedCity: '', // 选中的城市
      selectedDistrict: '', // 选中的区域
      provinceCode: '', // 省份编码
      cityCode: '', // 城市编码
      districtCode: '', // 区域编码
      // 地区数据
      areaData: [], // 完整的地区数据
      provinceList: [], // 省份列表
      cityList: [], // 城市列表
      districtList: [], // 区域列表
      // 选择器相关
      selectedProvinceIndex: 0,
      selectedCityIndex: 0,
      selectedDistrictIndex: 0,
      provinceOptions: ['全部'],
      cityOptions: ['全部'],
      districtOptions: ['全部'],
      // 公司类型字典名称
      companyTypeDictType: 'recruit_company_type',
      // 公司类型字典
      companyTypeDict: [],
      // 学历要求字典名称
      degreeTypeDictType: 'recruit_degree',
      // 学历要求字典
      degreeTypeDict: [],
      // 报名状态字典名称
      applyStatusDictType: 'recruit_notice_status',
      // 报名状态字典
      applyStatusDict: [],
      // 是否带编字典名称
      yesOrNoDictType: 'recruit_yes_no',
      // 是否带编字典
      yesOrNoDict: [],
      // 筛选面板相关
      showFilter: false,
      currentCompanyType: { dictValue: '', dictLabel: '全部' },
      currentWeave: { dictValue: '', dictLabel: '全部' },
      currentStatus: { dictValue: '', dictLabel: '全部' }
    }
  },
  onLoad() {
    // 获取状态栏高度
    const systemInfo = uni.getSystemInfoSync();
    this.statusBarHeight = systemInfo.statusBarHeight;
    
    // 初始化地区数据
    this.initAreaData();
    
    // 加载字典数据
    this.loadDictData();
    
    // 加载公告数据
    this.fetchNoticeList();
  },
  
  // 页面显示时触发
  onShow() {
  },
  
  // 页面尺寸变化时触发
  onResize() {
  },
  
  // 页面滚动时触发
  onPageScroll(e) {
  },
  
  // 触底事件
  onReachBottom() {
    this.loadMore();
  },
  methods: {
    // 获取公告列表
    async fetchNoticeList(isRefresh = false) {
      if (this.isLoading) return Promise.resolve();
      
      this.isLoading = true;
      
      if (isRefresh) {    
        this.pageNum = 1;
        this.noticeList = [];
        this.hasMore = true;
      }
      
      return new Promise((resolve, reject) => {
        try {
          // 合并省市区为地址
          let address = '';
          if (this.selectedProvince && this.selectedProvince !== '全部') {
            address = this.selectedProvince;
            if (this.selectedCity && this.selectedCity !== '全部') {
              address += this.selectedCity;
              if (this.selectedDistrict && this.selectedDistrict !== '全部') {
                address += this.selectedDistrict;
              }
            }
          }
          
          const params = {
            pageNum: this.pageNum,
            pageSize: this.pageSize,
            title: this.searchTitle || undefined,
            address: address || undefined,
            companyType: this.currentCompanyType.dictValue || undefined,
            isWeave: this.currentWeave.dictValue || undefined,
            applyStatus: this.currentStatus.dictValue || undefined
          };
          
          getRecruitNotice(params).then(res => {
            if (res.code === 200) {
              const { rows, total } = res;
              
              // 处理数据转换
              const processedRows = this.processNoticeData(rows || []);
              
              if (isRefresh) {
                this.noticeList = processedRows;
              } else {
                this.noticeList = [...this.noticeList, ...processedRows];
              }
              
              this.total = total || 0;
              this.hasMore = this.noticeList.length < this.total;
              console.log('数据加载完成，总数据：', this.total, '已加载：', this.noticeList.length, '是否有更多：', this.hasMore);
              
              resolve();
            } else {
              uni.showToast({
                title: res.msg || '加载数据失败',
                icon: 'none'
              });
              reject(new Error(res.msg || '加载数据失败'));
            }
          }).catch(error => {
            console.error('加载数据失败', error);
            uni.showToast({
              title: '网络异常，请稍后重试',
              icon: 'none'
            });
            reject(error);
          }).finally(() => {
            this.isLoading = false;
            this.isRefreshing = false;
          });
        } catch (error) {
          console.error('加载数据失败', error);
          uni.showToast({
            title: '网络异常，请稍后重试',
            icon: 'none'
          });
          this.isLoading = false;
          this.isRefreshing = false;
          reject(error);
        }
      });
    },
    
    // 下拉刷新
    onRefresh() {
      this.isRefreshing = true;
      this.fetchNoticeList(true).finally(() => {
        this.isRefreshing = false;
      });
    },
    
    // 加载更多
    loadMore() {
      console.log('触发加载更多',this.hasMore,this.isLoading);
      if (!this.hasMore || this.isLoading) return;
      
      console.log('触发加载更多，当前页码：', this.pageNum, '总数据：', this.total, '已加载：', this.noticeList.length);
      this.pageNum++;
      this.fetchNoticeList();
    },
    
    // 查看公告详情
    viewNoticeDetail(item) {
      uni.navigateTo({
        url: `/pagesA/recruitNotice/detail?noticeId=${item.noticeId}`
      });
    },
    
    // 格式化日期
    formatDate(dateStr) {
      if (!dateStr) return '--';
      const date = new Date(dateStr);
      return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
    },
    
    // 获取状态文本
    getStatusText(value) {
      if (!value && value !== 0) return '--';
      const dictValue = String(value);
      const dictItem = this.applyStatusDict.find(item => item.dictValue === dictValue);
      return dictItem ? dictItem.dictLabel : '--';
    },
    
    // 获取状态样式类
    getStatusClass(status) {
      const classMap = {
        3: 'status-coming',
        1: 'status-ongoing',
        2: 'status-closing',
        4: 'status-closed'
      };
      return classMap[status] || '';
    },
    
    // 获取卡片边框样式类
    getBorderClass(status) {
      const classMap = {
        3: 'border-coming',
        1: 'border-ongoing',
        2: 'border-closing',
        4: 'border-closed'
      };
      return classMap[status] || '';
    },
    
    // 获取公司类型文本
    getCompanyTypeText(value) {
      if (!value && value !== 0) return '--';
      const dictValue = String(value);
      const dictItem = this.companyTypeDict.find(item => item.dictValue === dictValue);
      return dictItem ? dictItem.dictLabel : '--';
    },
    
    // 处理公告数据转换
    processNoticeData(rows) {
      if (!rows || !Array.isArray(rows)) return [];
      
      return rows.map(item => {
        // 可以在这里进行数据转换和处理
        // 例如日期格式化、状态转换等
        return {
          ...item,
          // 如果需要添加额外的处理字段，可以在这里添加
          formattedStartTime: this.formatDate(item.startTime),
          formattedEndTime: this.formatDate(item.endTime),
          formattedRecruitTime: (item.startTime && item.endTime) ? 
            `${this.formatDate(item.startTime)} ~ ${this.formatDate(item.endTime)}` : '暂无',
          statusText: this.getStatusText(item.applyStatus),
          companyTypeText: this.getCompanyTypeText(item.companyType),
          isWeaveText: item.isWeave !== undefined ? (item.isWeave ? '带编' : '不带编') : '暂无',
          recruitNum: item.recruitNum || '暂无',
          address: item.address || '暂无'
        };
      });
    },
    
    // 处理搜索
    handleSearch() {
      // 重置页码并重新加载数据
      this.pageNum = 1;
      this.noticeList = [];
      this.hasMore = true;
      this.fetchNoticeList(true);
    },
    
    // 清除搜索内容
    clearSearch() {
      this.searchTitle = '';
      // 如果已经输入过搜索内容，清除后立即搜索
      this.handleSearch();
    },
    
    // 初始化地区数据
    initAreaData() {
      try {
        // 获取地区数据
        this.areaData = Area;
        
        // 初始化省份列表
        this.provinceList = this.areaData.map(province => ({
          code: province.value,
          name: province.label
        }));
        
        // 对省份列表进行重新排序，将云南、贵州、四川、重庆和广西放在前面
        const priorityProvinces = ['云南省', '贵州省', '四川省', '重庆市', '广西壮族自治区'];
        
        // 分离出优先省份和其他省份
        const priorityList = [];
        const otherList = [];
        
        this.provinceList.forEach(province => {
          if (priorityProvinces.includes(province.name)) {
            priorityList.push(province);
          } else {
            otherList.push(province);
          }
        });
        
        // 按照指定的顺序排序优先省份
        priorityList.sort((a, b) => {
          return priorityProvinces.indexOf(a.name) - priorityProvinces.indexOf(b.name);
        });
        
        // 合并优先省份和其他省份
        this.provinceList = [...priorityList, ...otherList];
        
        // 初始化省份选择器选项
        this.provinceOptions = ['全部'].concat(this.provinceList.map(item => item.name));
        
        // 重置城市和区域选择器
        this.cityOptions = ['全部'];
        this.districtOptions = ['全部'];
      } catch (error) {
        console.error('初始化地区数据失败:', error);
        this.provinceList = [];
        this.provinceOptions = ['全部'];
      }
    },
    
    // 省份选择器变化
    onProvinceChange(e) {
      try {
        const index = e.detail.value;
        // 如果选择了第一项（请选择省份），则视为清空选择
        if (index === 0) {
          this.selectedProvinceIndex = 0;
          this.selectedProvince = '';
          this.provinceCode = '';
          this.selectedCity = '';
          this.cityCode = '';
          this.selectedDistrict = '';
          this.districtCode = '';
          this.selectedCityIndex = 0;
          this.selectedDistrictIndex = 0;
          this.cityOptions = ['全部'];
          this.districtOptions = ['全部'];
        } else {
          this.selectedProvinceIndex = index;
          const province = this.provinceList[index - 1]; // 因为选项列表第一项是"全部"
          this.selectedProvince = province.name;
          this.provinceCode = province.code;
          this.selectedCity = '';
          this.cityCode = '';
          this.selectedDistrict = '';
          this.districtCode = '';
          this.selectedCityIndex = 0;
          this.selectedDistrictIndex = 0;
          
          // 加载城市列表
          this.loadCityList();
        }
        
        // 重置页码和列表数据
        this.pageNum = 1;
        this.noticeList = [];
        this.hasMore = true;
        
        // 执行搜索
        this.fetchNoticeList(true);
      } catch (error) {
        console.error('省份选择器变化处理失败:', error);
      }
    },
    
    // 城市选择器变化
    onCityChange(e) {
      try {
        const index = e.detail.value;
        // 如果选择了第一项（请选择城市），则视为清空选择
        if (index === 0) {
          this.selectedCityIndex = 0;
          this.selectedCity = '';
          this.cityCode = '';
          this.selectedDistrict = '';
          this.districtCode = '';
          this.selectedDistrictIndex = 0;
          this.districtOptions = ['全部'];
        } else {
          this.selectedCityIndex = index;
          const city = this.cityList[index - 1]; // 因为选项列表第一项是"全部"
          this.selectedCity = city.name;
          this.cityCode = city.code;
          this.selectedDistrict = '';
          this.districtCode = '';
          this.selectedDistrictIndex = 0;
          
          // 加载区域列表
          this.loadDistrictList();
        }
        
        // 重置页码和列表数据
        this.pageNum = 1;
        this.noticeList = [];
        this.hasMore = true;
        
        // 执行搜索
        this.fetchNoticeList(true);
      } catch (error) {
        console.error('城市选择器变化处理失败:', error);
      }
    },
    
    // 区域选择器变化
    onDistrictChange(e) {
      try {
        const index = e.detail.value;
        // 如果选择了第一项（请选择区域），则视为清空选择
        if (index === 0) {
          this.selectedDistrictIndex = 0;
          this.selectedDistrict = '';
          this.districtCode = '';
        } else {
          this.selectedDistrictIndex = index;
          const district = this.districtList[index - 1]; // 因为选项列表第一项是"全部"
          this.selectedDistrict = district.name;
          this.districtCode = district.code;
        }
        
        // 重置页码和列表数据
        this.pageNum = 1;
        this.noticeList = [];
        this.hasMore = true;
        
        // 执行搜索
        this.fetchNoticeList(true);
      } catch (error) {
        console.error('区域选择器变化处理失败:', error);
      }
    },
    
    // 加载城市列表
    loadCityList() {
      try {
        // 从areaData中查找对应的省份
        const provinceData = this.areaData.find(p => p.value === this.provinceCode);
        if (provinceData && provinceData.children) {
          // 从省份数据中获取城市列表
          this.cityList = provinceData.children.map(city => ({
            code: city.value,
            name: city.label
          }));
          
          // 更新城市选择器选项
          this.cityOptions = ['全部'].concat(this.cityList.map(item => item.name));
        } else {
          this.cityList = [];
          this.cityOptions = ['全部'];
        }
        
        // 重置区域选择器
        this.districtOptions = ['全部'];
      } catch (error) {
        console.error('加载城市数据失败:', error);
        this.cityList = [];
        this.cityOptions = ['全部'];
      }
    },
    
    // 加载区域列表
    loadDistrictList() {
      try {
        // 从areaData中查找对应的省份
        const provinceData = this.areaData.find(p => p.value === this.provinceCode);
        if (provinceData && provinceData.children) {
          // 从省份数据中查找对应的城市
          const cityData = provinceData.children.find(c => c.value === this.cityCode);
          if (cityData && cityData.children) {
            // 从城市数据中获取区域列表
            this.districtList = cityData.children.map(district => ({
              code: district.value,
              name: district.label
            }));
            
            // 更新区域选择器选项
            this.districtOptions = ['全部'].concat(this.districtList.map(item => item.name));
            return;
          }
        }
        this.districtList = [];
        this.districtOptions = ['全部'];
      } catch (error) {
        console.error('加载区域数据失败:', error);
        this.districtList = [];
        this.districtOptions = ['全部'];
      }
    },
    
    // 清空所有筛选条件
    clearAllFilters() {
      // 重置省市区选择器
      this.selectedProvinceIndex = 0;
      this.selectedCityIndex = 0;
      this.selectedDistrictIndex = 0;
      this.selectedProvince = '';
      this.selectedCity = '';
      this.selectedDistrict = '';
      this.provinceCode = '';
      this.cityCode = '';
      this.districtCode = '';
      this.cityOptions = ['全部'];
      this.districtOptions = ['全部'];
      
      // 清空搜索内容
      this.searchTitle = '';
      
      // 重置页码和列表数据
      this.pageNum = 1;
      this.noticeList = [];
      this.hasMore = true;
      
      // 执行搜索
      this.fetchNoticeList(true);
    },
    
    // 重置所有筛选条件并重新查询
    resetAllFilters() {
      // 重置省市区选择器
      this.selectedProvinceIndex = 0;
      this.selectedCityIndex = 0;
      this.selectedDistrictIndex = 0;
      this.selectedProvince = '';
      this.selectedCity = '';
      this.selectedDistrict = '';
      this.provinceCode = '';
      this.cityCode = '';
      this.districtCode = '';
      this.cityOptions = ['全部'];
      this.districtOptions = ['全部'];
      
      // 清空搜索内容
      this.searchTitle = '';
      
      // 重置筛选面板条件
      this.currentCompanyType = { dictValue: '', dictLabel: '全部' };
      this.currentWeave = { dictValue: '', dictLabel: '全部' };
      this.currentStatus = { dictValue: '', dictLabel: '全部' };
      
      // 重置页码和列表数据
      this.pageNum = 1;
      this.noticeList = [];
      this.hasMore = true;
      
      // 显示加载提示
      uni.showLoading({
        title: '加载中...'
      });
      
      // 执行搜索
      this.fetchNoticeList(true).then(() => {
        uni.hideLoading();
        
        // 显示重置成功提示
        uni.showToast({
          title: '已重置筛选条件',
          icon: 'none',
          duration: 1500
        });
      }).catch(() => {
        uni.hideLoading();
      });
    },
    
    // 显示筛选面板
    showFilterPanel() {
      this.showFilter = true;
    },
    
    // 隐藏筛选面板
    hideFilterPanel() {
      this.showFilter = false;
    },
    
    // 处理公司类型变化
    handleCompanyTypeChange(e) {
      const index = e.detail.value;
      this.currentCompanyType = this.companyTypeOptions[index];
    },
    
    // 处理是否带编变化
    handleWeaveChange(e) {
      const index = e.detail.value;
      this.currentWeave = this.yesOrNoOptions[index];
    },
    
    // 处理状态变化
    handleStatusChange(e) {
      const index = e.detail.value;
      this.currentStatus = this.statusOptions[index];
    },
    
    // 确认筛选
    confirmFilter() {
      this.hideFilterPanel();
      // 重置页码并重新加载数据
      this.pageNum = 1;
      this.noticeList = [];
      this.hasMore = true;
      this.fetchNoticeList(true);
    },
    
    // 重置筛选条件
    resetFilter() {
      // 重置筛选条件
      this.currentCompanyType = { dictValue: '', dictLabel: '全部' };
      this.currentWeave = { dictValue: '', dictLabel: '全部' };
      this.currentStatus = { dictValue: '', dictLabel: '全部' };
    },
    
    async loadDictData() {
      try {
        // 并行加载所有字典数据
        const [companyTypeRes, degreeTypeRes, applyStatusRes, yesOrNoRes] = await Promise.all([
          getDicts(this.companyTypeDictType),
          getDicts(this.degreeTypeDictType),
          getDicts(this.applyStatusDictType),
          getDicts(this.yesOrNoDictType)
        ]);
        
        // 设置字典数据
        if (companyTypeRes.code === 200) {
          this.companyTypeDict = companyTypeRes.data;
        }
        
        if (degreeTypeRes.code === 200) {
          this.degreeTypeDict = degreeTypeRes.data;
        }
        
        if (applyStatusRes.code === 200) {
          this.applyStatusDict = applyStatusRes.data;
        }
        
        if (yesOrNoRes.code === 200) {
          this.yesOrNoDict = yesOrNoRes.data;
        }
      } catch (error) {
        console.error('加载字典数据失败', error);
      }
    }
  }
}
</script>

<style>
.notice-container {
  min-height: 100vh;
  background: #f5f7fa;
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

/* 固定区域样式 */
.fixed-section {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  background: #f5f7fa;
  padding: 10rpx 24rpx;
  padding-top: calc(var(--status-bar-height) - 10rpx);
}

/* 标题区域样式 */
.header-section {
  background: #fff;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
  padding: 10rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.header-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

/* 搜索区域样式 */
.search-area {
  position: fixed;
  top: var(--status-bar-height-10px);
  left: 0;
  right: 0;
  background-color: #fff;
  padding: 20rpx 24rpx;
  z-index: 100;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
  width: 100%;
  min-height: 180rpx;
  display: flex;
  flex-direction: column;
}

/* 地区选择行样式 */
.location-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20rpx;
  padding: 0 10rpx;
}

.location-item {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f5f7fa;
  height: 70rpx;
  border-radius: 8rpx;
  margin: 0 10rpx;
  padding: 0 10rpx;
  position: relative;
  overflow: visible;
  z-index: 101;
}

.rounded-selector {
  background-color: #f6f7fb;
  border-radius: 30rpx;
  height: 64rpx;
  box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.05);
  padding: 0 15rpx;
}

.location-item:first-child {
  margin-left: 0;
}

.location-item:last-child {
  margin-right: 0;
}

.location-text {
  font-size: 24rpx;
  color: #666;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 85%;
  display: block;
  text-align: center;
  padding-right: 20rpx;
}

.location-icon {
  position: absolute;
  right: 16rpx;
  top: 50%;
  transform: translateY(-50%);
}

.picker-item {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10rpx;
  box-sizing: border-box;
  white-space: nowrap;
}

.picker-item.disabled {
  opacity: 0.6;
}

/* 搜索行样式 */
.search-row {
  display: flex;
  align-items: center;
}

.search-box {
  flex: 1;
  display: flex;
  align-items: center;
  background-color: #f5f7fa;
  height: 70rpx;
  border-radius: 8rpx;
  padding: 0 20rpx;
  margin-right: 20rpx;
  box-sizing: border-box;
}

.search-icon {
  font-size: 28rpx;
  color: #999;
  margin-right: 10rpx;
}

.search-input {
  flex: 1;
  height: 100%;
  font-size: 28rpx;
  color: #333;
}

.clear-icon {
  font-size: 24rpx;
  color: #999;
  padding: 10rpx;
}

.search-btn {
  width: 120rpx;
  height: 70rpx;
  background-color: #409EFF;
  color: #fff;
  font-size: 28rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8rpx;
  margin-right: 10rpx;
}

.filter-btn {
  width: 90rpx;
  height: 70rpx;
  background-color: #f5f7fa;
  color: #666;
  font-size: 28rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8rpx;
}

/* 公告列表样式 */
.notice-list {
  flex: 1;
  margin-top: calc(var(--status-bar-height) + 180rpx); /* 调整顶部边距，为搜索区域留出足够空间 */
  height: calc(100vh - var(--status-bar-height) - 240rpx); /* 确保能触发底部事件 */
  padding: 10rpx 24rpx;
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
}

.notice-card {
  padding: 20rpx 16rpx;
  border-bottom: 1rpx solid #eee;
  position: relative;
  width: 100%;
  box-sizing: border-box;
  overflow: visible;
}

.notice-card:last-child {
  border-bottom: none;
}

.notice-card:active {
  background-color: #f9f9f9;
}

.notice-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 14rpx;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 4rpx;
  word-break: break-all;
}

.notice-info {
  margin-top: 16rpx;
}

.notice-tags-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10rpx;
}

.notice-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8rpx;
}

.notice-tag {
  font-size: 20rpx;
  padding: 2rpx 8rpx;
  border-radius: 4rpx;
  background: #f5f5f5;
  color: #666;
  margin-bottom: 4rpx;
  white-space: nowrap;
  max-width: 100%;
}

.notice-detail {
  display: flex;
  flex-direction: column;
  margin-bottom: 10rpx;
}

.notice-detail-item {
  font-size: 24rpx;
  color: #666;
  margin-bottom: 4rpx;
}

.notice-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 6rpx;
  flex-wrap: wrap;
}

.notice-time {
  font-size: 22rpx;
  color: #888;
  background-color: #f8f8f8;
  padding: 4rpx 10rpx;
  border-radius: 4rpx;
  margin-right: 8rpx;
}

.notice-status {
  font-size: 22rpx;
  padding: 4rpx 12rpx;
  border-radius: 6rpx;
  font-weight: normal;
}

/* 状态样式 */
.status-coming {
  color: #409EFF;
  background-color: rgba(64, 158, 255, 0.1);
  padding: 4rpx 12rpx;
  border-radius: 6rpx;
  font-weight: normal;
}

.status-ongoing {
  color: #67C23A;
  background-color: rgba(103, 194, 58, 0.1);
  padding: 4rpx 12rpx;
  border-radius: 6rpx;
  font-weight: normal;
}

.status-closing {
  color: #E6A23C;
  background-color: rgba(230, 162, 60, 0.1);
  padding: 4rpx 12rpx;
  border-radius: 6rpx;
  font-weight: normal;
}

.status-closed {
  color: #F56C6C;
  background-color: rgba(245, 108, 108, 0.1);
  padding: 4rpx 12rpx;
  border-radius: 6rpx;
  font-weight: normal;
}

/* 加载更多提示 */
.loading-more {
  text-align: center;
  padding: 30rpx 0;
  color: #999;
  font-size: 26rpx;
}

/* 底部占位 */
.bottom-placeholder {
  height: 80rpx;
  width: 100%;
}

/* 空状态提示 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 120rpx 0;
}

.empty-state::before {
  content: '\e62e'; /* 使用一个通用的空状态图标，可根据项目实际情况调整 */
  font-family: 'iconfont';
  font-size: 80rpx;
  color: #ddd;
  margin-bottom: 20rpx;
}

.empty-text {
  font-size: 28rpx;
  color: #999;
  line-height: 1.6;
  margin-bottom: 30rpx;
}

.reset-filter-btn {
  margin-top: 20rpx;
  padding: 16rpx 40rpx;
  background-color: #409EFF;
  color: #fff;
  font-size: 28rpx;
  border-radius: 40rpx;
  display: inline-block;
}

/* 筛选面板样式 */
.filter-panel {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
}

.filter-panel-mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
}

.filter-panel-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  border-radius: 24rpx 24rpx 0 0;
  padding: 30rpx;
  transform: translateY(0);
  transition: transform 0.3s;
}

.filter-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30rpx;
  font-size: 32rpx;
  font-weight: bold;
}

.close-btn {
  font-size: 40rpx;
  color: #999;
  padding: 10rpx;
}

.filter-panel-body {
  max-height: 60vh;
  overflow-y: auto;
}

.filter-panel-item {
  margin-bottom: 30rpx;
}

.filter-label {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 16rpx;
  display: block;
  font-weight: 500;
}

.filter-picker {
  background: #f5f7fa;
  height: 72rpx;
  border-radius: 8rpx;
  padding: 0 20rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.filter-picker-text {
  font-size: 28rpx;
  color: #333;
  display: flex;
  align-items: center;
}

.filter-picker-text::after {
  content: "";
  border-top: 12rpx solid #666;
  border-left: 8rpx solid transparent;
  border-right: 8rpx solid transparent;
  margin-left: 16rpx;
  margin-top: 0;
  align-self: center;
}

.filter-panel-footer {
  display: flex;
  justify-content: space-between;
  margin-top: 30rpx;
  padding-top: 30rpx;
  border-top: 1rpx solid #eee;
}

.reset-btn, .confirm-btn {
  width: 45%;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  border-radius: 40rpx;
  font-size: 28rpx;
}

.reset-btn {
  background: #f5f7fa;
  color: #666;
}

  .confirm-btn {
    background: #007aff;
    color: #fff;
  }
</style>